<template>
  <div class="all-apps">
    <!-- 常用应用 -->
    <section
      class="collect-list"
      :style="pcMenuType == 2 ? 'margin-top: 0px' : ''"
      v-if="showType != 'content'"
    >
      <a-row class="app-box" :gutter="[16, 16]">
        <a-col :sm="24" :md="16" :lg="12" :xl="8" class="banner">
          <div class="banner-img">
            <img
              class="banner-text"
              src="../../../../common/images/application/banner_text.png"
            />
          </div>
        </a-col>
        <a-col
          :xs="24"
          :sm="12"
          :md="{ span: 8, offset: index <= 1 ? 16 : 0 }"
          :lg="{ span: 6, offset: index == 0 || index == 2 ? 12 : 0 }"
          :xl="{ span: 4, offset: index == 0 || index == 4 ? 8 : 0 }"
          v-for="(app, index) of collectList"
          :key="index"
        >
          <div class="app-item" v-if="app.id == -1" @click="addCollect('add')">
            <div class="icon-box" style="background: #f5f6f7">
              <PlusOutlined style="color: #666" />
            </div>
            <div class="app-name">
              <div class="name">添加常用</div>
            </div>
          </div>
          <div class="app-item" v-else @click="handleItemClick(app)">
            <div class="icon-box">
              <img class="image" v-if="app.app_logo" :src="app.app_logo" />
              <cu-icon v-else type="org-menu-yingyong"></cu-icon>
            </div>
            <div class="app-name">
              <div class="name">{{ app.app_name }}</div>
              <div class="nowrap">{{ app.app_info }}</div>
            </div>
            <a-dropdown>
              <a-button type="text" @click.stop class="option">
                <EllipsisOutlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a-button type="text" @click="removeCollectApp(app.id)">
                      <template #icon>
                        <MinusCircleOutlined />
                      </template>
                      移除
                    </a-button>
                  </a-menu-item>
                  <a-menu-item>
                    <a-button type="text" @click="addCollect('sort')">
                      <template #icon>
                        <SwapOutlined />
                      </template>
                      排序
                    </a-button>
                  </a-menu-item>
                  <template v-if="app.app_micro">
                    <a-menu-item v-if="menuAppIds.includes(app.id)">
                      <a-button
                        type="text"
                        @click="setToMenu(app, 0)"
                        key="unset_to_menu"
                      >
                        <template #icon>
                          <BulbOutlined />
                        </template>
                        取消设为菜单
                      </a-button>
                    </a-menu-item>
                    <a-menu-item v-else key="set_to_menu">
                      <a-button type="text" @click="setToMenu(app, 1)">
                        <template #icon>
                          <BulbOutlined />
                        </template>
                        设为菜单
                      </a-button>
                    </a-menu-item>
                  </template>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-col>
      </a-row>
    </section>

    <!-- 应用分类 -->
    <section class="app-list">
      <div class="title" v-if="showType != 'content'">全部应用</div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane
          v-for="cat of showDataList"
          :key="cat.id"
          :tab="cat.cat_name"
        >
          <!-- 应用 -->
          <a-row
            v-if="cat.appList && cat.appList.length"
            class="app-box"
            :wrap="true"
            :gutter="[16, 16]"
          >
            <a-col
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
              v-for="app of cat.appList"
              :key="app.id"
            >
              <div class="app-item" @click="handleItemClick(app)">
                <div class="icon-box">
                  <img class="image" v-if="app.app_logo" :src="app.app_logo" />
                  <cu-icon v-else type="org-menu-yingyong"></cu-icon>
                </div>
                <div class="app-name">
                  <div class="name">{{ app.app_name }}</div>
                  <div class="nowrap">{{ app.app_info }}</div>
                </div>
              </div>
            </a-col>
          </a-row>
          <div class="no-data" v-else>该分类下暂无应用</div>
        </a-tab-pane>
      </a-tabs>
    </section>
    <AddCollectApp
      :visible="addCollectVisible"
      :appList="allAppList"
      :collectList="collectList"
      :tab="activeTab"
      @close="addCollectVisible = false"
      @success="handleAddCollectSuccess"
      @addSuccess="getData(true)"
    />
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onActivated,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import {
  AlertOutlined,
  PlusOutlined,
  EllipsisOutlined,
  MinusCircleOutlined,
  SwapOutlined,
  BulbOutlined,
} from "@ant-design/icons-vue";
import request from "../../../../common/utils/request";
import AddCollectApp from "./AddCollectApp.vue";
import { message } from "ant-design-vue";
import store from "../../../../store";
import { useRoute } from "vue-router";

export default defineComponent({
  name: "ApplicationsAll",
  props: {
    pcMenuType: {
      type: Number,
      default: 1,
    },
  },
  components: {
    AlertOutlined,
    PlusOutlined,
    EllipsisOutlined,
    MinusCircleOutlined,
    SwapOutlined,
    BulbOutlined,
    AddCollectApp,
  },
  setup(props, context) {
    console.log("props", props);

    const pcMenuType = props.pcMenuType;

    const route = useRoute();

    const handleItemClick = (app) => {
      context.emit("appClick", app);
    };

    const addCollect = (type) => {
      state.activeTab = type == "sort" ? 2 : 1;
      state.addCollectVisible = true;
    };

    const handleAddCollectSuccess = () => {
      getData();
      state.addCollectVisible = false;
    };

    const removeCollectApp = (id) => {
      request
        .del("/org", "/app/collect", {
          app_id: id,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "移除成功！");
          getData();
        });
    };

    const menuAppIds = computed(() =>
      store.getters.appList.map((item) => item.id)
    );

    const setToMenu = (app, isMenu) => {
      request
        .post("/org", "/app/collect/menu", {
          id: app.id,
          is_menu: isMenu,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "操作成功！");
          if (isMenu == 1) {
            store.dispatch("PushAppList", app);
          } else {
            store.dispatch("RemoveFromAppList", app);
          }
        });
    };

    const state = reactive({
      dataList: [],
      showDataList: [],
      allAppList: [],
      collectList: [],
      activeKey: 0,
      addCollectVisible: false,
      activeTab: 1,
      showType: route.query.show || "",
      defaultTabKey: route.query.id || 0,
    });

    const getData = (getCollect = false) => {
      request.get("/org", "/app/index").then((res) => {
        state.collectList = [];
        state.collectList = res.collectList || [];
        state.collectList.push({ id: -1 });
        if (!getCollect) {
          state.dataList = res.list;
          state.allAppList = state.dataList[0].appList;
          context.emit("getAllApp", { appList: state.allAppList });
          setCurrentTab();
        }
      });
    };

    const setCurrentTab = () => {
      if (state.dataList.length) {
        if (state.defaultTabKey) {
          let idx = state.dataList.findIndex(
            (item) => item.id == state.defaultTabKey
          );
          if (idx != -1) {
            state.showDataList = state.dataList.slice(idx, idx + 1);
          }
        } else {
          state.showDataList = [...state.dataList];
        }
        state.activeKey = state.showDataList[0].id;
      }
    };

    watch(
      [() => route.name, () => route.query],
      ([name, query], [preName, preQuery]) => {
        if (name == "applications") {
          state.showType = query.show || "";
          state.defaultTabKey = query.id || 0;
          if (name != preName) {
            // 路由地址变化
            getData();
          } else {
            // 路由参数变化
            setCurrentTab();
          }
        }
      }
    );

    // 初始化
    const init = () => {
      if (route.name == "applications") {
        getData();
      }
    };

    init();

    return {
      menuAppIds,
      pcMenuType,
      ...toRefs(state),
      handleItemClick,
      addCollect,
      handleAddCollectSuccess,
      removeCollectApp,
      setToMenu,
      getData,
    };
  },
});
</script>

<style lang="less" scoped>
.all-apps {
  padding: 8px;
  background: #f5f6f7;
  box-sizing: border-box;
  min-height: 100%;
  :deep(.ant-tabs-bar) {
    border-bottom: 1px solid #e6e7e8 !important;
  }

  .collect-list {
    margin: 20px 0;
    min-height: 180px;
    .banner {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      .banner-img {
        height: 158px;
        width: 100%;
        margin-top: 16px;
        margin-bottom: 16px;
        margin-left: 8px;
        border-radius: 8px;
        background-image: url(../../../../common/images/application/banner.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom right;
      }
      .banner-text {
        position: absolute;
        width: 50%;
        left: 40px;
        top: 50%;
        transform: translateY(-60%);
      }
    }
  }

  .title {
    font-size: 18px;
    padding: 4px 8px;
  }

  .app-box {
    padding: 16px 8px;
    position: relative;
    .app-item {
      width: 100%;
      height: 70px;
      border-radius: @border-radius-cardsmall;
      background: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 10px 16px;
      box-shadow: @box-shadow-base;
      position: relative;
      .icon-box {
        width: 40px;
        height: 40px;
        border-radius: @border-radius-base;
        background: @primary-color;
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        .image {
          width: 100%;
          height: 100%;
        }
      }
      .app-name {
        flex: 1;
        margin-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        color: rgba(0, 0, 0, 0.4);
        font-size: 12px;
        line-height: 20px;
        .name {
          color: rgba(0, 0, 0, 1);
          font-size: 15px;
        }
      }
      .option {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    }
  }
}

:deep(.ant-tabs-nav) {
  border-bottom: 1px solid #e6e7e8;
}
</style>
